<template>
	<view class="dialList">
		<u-radio-group v-model="value" @change="groupChange">
			<view class="" style="width: 100%;">
				<view class="dial-item" v-for="(item,index) in list" @tap="handleBtn(item)">
					<view class="" style="margin-right: 20rpx;">
						<image style="width: 60rpx;height: 60rpx" :src="item.image" mode=""></image>
					</view>
					<view style="flex: 3;">{{item.sn}}</view>
					<view class=""><u-radio :disabled="item.onlineCode==='1'" activeColor="#5990FF"
							:name="item.sn"></u-radio></view>
				</view>
			</view>
		</u-radio-group>
		<view class="bottom">
			<u-button :disabled="!list.length" type="warning" customStyle="width: 300rpx" color="#5990FF" shape="circle"
				text="下一步" @click="handleNext"></u-button>
		</view>
		<view class="" v-if="!list.length" style="margin-top: 300rpx;">
			<u-empty mode="data"></u-empty>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: -1,
				list: [],
				page: 1,
				limit: 20,
				onlineCode: -1,
				groupId: -1,
				pipeType: 3,
			};
		},
		onPullDownRefresh() {
			this.page = 1
			this.list = []
			setTimeout(() => {
				this.getUserSnList()
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onLoad() {
			this.getUserSnList()
		},
		methods: {
			getUserSnList() {
				this.$fun.ajax.post('butt/userSnList', {
					page: this.page,
					limit: this.limit,
					onlineCode: this.onlineCode,
					group_id: this.groupId,
					pipeType: this.pipeType,
					vlan: 0
				}).then(res => {
					if (res.data.list.length > 0) {
						this.list.push(...res.data.list);
						this.page++
					} else {
						if (this.page != 1) {
							// this.$fun.msg('没有更多数据了...')
						}
					}
					// this.equipmentInfo = res.data
				})
			},
			groupChange(value) {
				this.value = value
			},
			handleBtn(val) {
				if (val.onlineCode === '1') return
				this.value = val.sn
			},
			handleNext() {
				if (this.value < 0) return this.$fun.msg('请选择设备')
				this.$fun.jump(`/pageC/DialSettingDetail/DialSettingDetail?sn=${this.value}`)
			}
		}
	}
</script>

<style scoped lang="scss">
	.u-radio-group--row {
		flex-direction: column;
	}

	.dialList {
		padding: 0 30rpx 100rpx 30rpx;

		.dial-item {
			margin: 10rpx 0;
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 100%;
			height: 100rpx;
			border: 1px solid #cbcbcb;
			border-radius: 20rpx;
			padding: 0 20rpx;
			box-shadow: 0px 1px 3px #c5c5c5;
		}

		.bottom {
			background-color: #fff;
			height: 100rpx;
			position: fixed;
			bottom: 20rpx;
			left: 0;
			right: 0;
			padding-top: 20rpx;
		}
	}
</style>